<table id="RoleGrid">
    <thead>

    </thead>
</table>
<div id="RoleToolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addItem(this)">添加</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem(this)">删除</a>
    <a class="datagrid-btn-separator"></a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="Competence(this)">分配权限</a>
</div>
<script type="text/javascript">
    var RoleGrid = $('#RoleGrid');
    $(function(){
        RoleGrid.datagrid({
            url: "{:U('role/query')}",
            fit:true,
            border:false,
            toolbar: "#RoleToolbar",
            pagination: true,
            singleSelect: true,
            rownumbers: true,
            fitColumns: true,
            columns:[[
                {field:'ck',checkbox:true},
                {field:'role_name',title:'角色名称',width:120},
                {field:'locked',title:'是否锁定',width: 50, align:'center', formatter: function(value){
                    if(value == '1') return '<font color="red">是</font>';
                    return '否';
                }},
                {field:'remark',title:'备注',width:200},
                {field: 'role_id', title: '操作', width: 20, align: 'center', formatter: function(role_id) {
                    var ctrs = ['<span title="编辑" class="images-btn icon-edit" onclick="editItem(' + role_id + ', this)"></span>'];
                    return ctrs.join(' ');
                }}
            ]]
        });
    })

    function addItem(element){
        blur(element);
        easyui.dialog({
            title: '添加角色',
            width: 400,
            height: 250,
            href: "{:U('role/form')}",
            handler: function(){
                RoleGrid.datagrid('reload');
            }
        });
    }

    function editItem(role_id, element){
        blur(element);
        role_id = role_id || RoleGrid.datagrid('getSelected').role_id;
        if(role_id){
            easyui.dialog({
                title: '编辑角色',
                width: 400,
                height: 250,
                href: "{:U('role/form')}",
                data: {role_id: role_id},
                handler: function(){
                    RoleGrid.datagrid('reload');
                }
            });
        }else{
            easyui.alert('请选择需要编辑的项！');
        }
    }

    function destroyItem(element)
    {
        blur(element);
        var selects = RoleGrid.datagrid('getChecked');
        if(selects.length > 0){
            var role_ids = [];
            for(var i = 0; i < selects.length; i++){
                role_ids.push(selects[i].role_id);
            }
            role_ids = role_ids.join(',');
            easyui.confirm('确定删除所选角色吗？删除该角色前请先将该角色下的管理员移除！', function(isOk){
                if(!isOk) return;
                easyui.AjaxCall("{:U('role/drop')}", {itemid: role_ids}, function(result){
                    if(result.success){
                        RoleGrid.datagrid('reload');
                    }else{
                        easyui.alert(result.message);
                    }
                });
            });
        }else{
            easyui.alert('请选择需要删除的项！');
        }
    }

    function Competence(element){
        blur(element);
        var row = RoleGrid.datagrid('getSelected');
        if(row){
            easyui.dialog({
                title: '分配权限',
                width: 300,
                height: 400,
                href: "{:U('role/competence')}",
                data: {role_id: row.role_id}
            });
        }else{
            easyui.alert('请选择一项角色！');
        }
    }
</script>